<template>
  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__control" @click="sidebarFold = !sidebarFold">
      <!-- <div class="left-line"></div> -->
       <icon-svg name="zhedie"></icon-svg>
      <!-- <div class="right-line"></div> -->
    </div>
    <div class="site-sidebar__inner">
      <el-menu
        :default-active="menuActiveName"
        :collapse="sidebarFold"
        :collapseTransition="false"
        class="site-sidebar__menu">
        <el-menu-item index="demo-echarts" @click="$router.push({ path: '/map' })">
          <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">一张图</span>
        </el-menu-item>
        <el-menu-item index="demo-echarts" @click="$router.push({ path: '/equip-status' })">
          <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">设备状态</span>
        </el-menu-item>
        <el-menu-item index="demo-echarts" @click="$router.push({ path: '/monitor-data' })">
          <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">应急监测数据</span>
        </el-menu-item>
        <el-menu-item index="demo-echarts" @click="$router.push({ path: '/video' })">
          <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">车载视频监控</span>
        </el-menu-item>
        <el-menu-item index="demo-echarts" @click="$router.push({ path: '/video-back' })">
          <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">车载历史视频</span>
        </el-menu-item>
        <el-menu-item index="demo-echarts" @click="$router.push({ path: '/task' })">
          <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">任务管理</span>
        </el-menu-item>
        <el-menu-item index="demo-echarts" @click="$router.push({ path: '/remote-control' })">
          <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">远程控制</span>
        </el-menu-item>
        <!-- <el-submenu index="demo">
          <template slot="title">
            <icon-svg name="shoucang" class="site-sidebar__menu-icon"></icon-svg>
            <span>demo</span>
          </template>
          <el-menu-item index="demo-echarts" @click="$router.push({ path: '/echarts' })">
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">echarts</span>
          </el-menu-item>
          <el-menu-item index="demo-echarts" @click="$router.push({ path: '/login' })">
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">login</span>
          </el-menu-item>
        </el-submenu> -->
        <!-- <sub-menu
          v-for="menu in menuList"
          :key="menu.id"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes">
        </sub-menu> -->
      </el-menu>
    </div>
  </aside>
</template>

<script>
  import SubMenu from './main-sidebar-sub-menu';
  // import { isURL } from '@/utils/validate';
  export default {
    data() {
      return {
        dynamicMenuRoutes: []
      };
    },
    components: {
      SubMenu
    },
    computed: {
      sidebarLayoutSkin: {
        get() { return this.$store.state.common.sidebarLayoutSkin; }
      },
      sidebarFold: {
        get() { return this.$store.state.common.sidebarFold; },
        set(val) { this.$store.commit('common/updateSidebarFold', val); }
      },
      menuList: {
        get() { return this.$store.state.common.menuList; }
        // set(val) { this.$store.commit('common/updateMenuList', val); }
      },
      menuActiveName: {
        get() { return this.$store.state.common.menuActiveName; },
        set(val) { this.$store.commit('common/updateMenuActiveName', val); }
      },
      mainTabs: {
        get() { return this.$store.state.common.mainTabs; },
        set(val) { this.$store.commit('common/updateMainTabs', val); }
      },
      mainTabsActiveName: {
        get() { return this.$store.state.common.mainTabsActiveName; },
        set(val) { this.$store.commit('common/updateMainTabsActiveName', val); }
      }
    },
    watch: {
      $route: 'routeHandle'
    },
    created() {
      // this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]');
      // this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]');
      this.routeHandle(this.$route);
    },
    methods: {

      isURL(s) {
        return /^http[s]?:\/\/.*/.test(s);
      },
      // 路由操作
      routeHandle(route) {
        if (route.meta.isTab) {
          // tab选中, 不存在先添加
          var tab = this.mainTabs.filter(item => item.name === route.name)[0];
          if (!tab) {
            if (route.meta.isDynamic) {
              route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0];
              if (!route) {
                return console.error('未能找到可用标签页!');
              }
            }
            tab = {
              menuId: route.meta.menuId || route.name,
              name: route.name,
              title: route.meta.title,
              type: this.isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
              iframeUrl: route.meta.iframeUrl || '',
              params: route.params,
              query: route.query
            };
            this.mainTabs = this.mainTabs.concat(tab);
          }
          this.menuActiveName = tab.menuId + '';
          this.mainTabsActiveName = tab.name;
        }
      }
    }
  };
</script>
